<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Components</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Components, Swing, Jython, programming, Linux">
<meta name="description" content="Components">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Components</h1>

<p>
In this part of the Jython Swing programming tutorial, we will cover
basic Swing components. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 


<p>
Components are basic building blocks of a GUI application. Over the years, 
several components became a standard in all toolkits on all OS platforms. 
For example a button, a check box or a scroll bar. 
Swing has a rich set of components which cover most of the programming needs.
More specialized components can be created as custom components. 
</p>


<h2>JCheckBox</h2>

<p>
The <b class="keyword">JCheckBox</b> is a component, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean property. 
The JCheckBox component provides a check box with a text label.
</p>

<pre class="code">
#!/usr/local/bin/jython
# -*- coding: utf-8 -*-

"""
ZetCode Jython Swing tutorial

This program uses JCheckBox
component to show/hide the title
of the window

author: Jan Bodnar
website: www.zetcode.com
last modified: November 2010
"""


from java.awt import Dimension
from javax.swing import Box
from javax.swing import BoxLayout
from javax.swing import JCheckBox
from javax.swing import JFrame


class Example(JFrame):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):


        self.setLayout(BoxLayout(self.getContentPane(), BoxLayout.Y_AXIS))
        self.add(Box.createRigidArea(Dimension(15, 20)))

        cb = JCheckBox("Show Title", True, actionPerformed=self.onSelect)
        cb.setFocusable(False)
        self.add(cb)


        self.setTitle("JCheckBox example")
        self.setSize(280, 200)
        self.setResizable(False)
        self.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
        self.setLocationRelativeTo(None)
        self.setVisible(True)


    def onSelect(self, e):

        source = e.getSource()
        isSelected = source.isSelected()

        if isSelected:
            self.setTitle("JCheckBox example")
        else:
            self.setTitle("")


if __name__ == '__main__':
    Example()
</pre>

<p>
In our example, we place a check box on the window. The check 
box shows/hides the title of the window. 
</p>

<pre class="explanation">
self.setLayout(BoxLayout(self.getContentPane(), BoxLayout.Y_AXIS))
self.add(Box.createRigidArea(Dimension(15, 20)))
</pre>

<p>
In this example, we use a <code>BoxLayout</code> layout manager. We put some space 
there, so that the check box is not too close to the corner.
</p>

<pre class="explanation">
cb = JCheckBox("Show Title", True, actionPerformed=self.onSelect)
</pre>

<p>
The <code>JCheckBox</code> component is created. The first
parameter of the constructor is its text label. The second parameter
is a  boolean value indicating the initial selection state. 
If True the check box is selected. The third parameter specifies the
method, which is called when we select or unselect the check box.
</p>


<pre class="explanation">
cb.setFocusable(False)
</pre>

<p>
We disable the focus for the check box. A <code>JCheckBox</code> that has a focus may
be selected or unselected with a spacebar. 
</p>

<pre class="explanation">
source = e.getSource()
isSelected = source.isSelected()

if isSelected:
    self.setTitle("JCheckBox example")
else:
    self.setTitle("")
</pre>

<p>
From the event object, we get the source component. In our case
is the a check box. We find out the selection state of the check box.
Depending on the state of the check box, we show or hide the title of the 
window. 
</p>

<br>
<img src="/img/gui/jrubyswing/jcheckbox.png" alt="JCheckBox">
<div class="figure">Figure: JCheckBox</div>


<h2>JLabel</h2>

<p>
The <code>JLabel</code> component is used to display text, image or
both. No user interaction is available.
</p>

<pre class="code">
#!/usr/local/bin/jython
# -*- coding: utf-8 -*-

"""
ZetCode Jython Swing tutorial

This program uses JLabel component to
show lyrics of a song

author: Jan Bodnar
website: www.zetcode.com
last modified: November 2010
"""

from java.awt import BorderLayout
from java.awt import Font
from javax.swing import BorderFactory
from javax.swing import JFrame
from javax.swing import JLabel
from javax.swing import JPanel


class Example(JFrame):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):

        lyrics =  """&lt;html&gt;It's way too late to think of&lt;br&gt;
        Someone I would call now&lt;br&gt;
        And neon signs got tired&lt;br&gt;
        Red eye flights help the stars out&lt;br&gt;
        I'm safe in a corner&lt;br&gt;
        Just hours before me&lt;br&gt;
        &lt;br&gt;
        I'm waking with the roaches&lt;br&gt;
        The world has surrendered&lt;br&gt;
        I'm dating ancient ghosts&lt;br&gt;
        The ones I made friends with&lt;br&gt;
        The comfort of fireflies&lt;br&gt;
        Long gone before daylight&lt;br&gt;
        &lt;br&gt;
        And if I had one wishful field tonight&lt;br&gt;
        I'd ask for the sun to never rise&lt;br&gt;
        If God leant his voice for me to speak&lt;br&gt;
        I'd say go to bed, world&lt;br&gt;
        &lt;br&gt;
        I've always been too late&lt;br&gt;
        To see what's before me&lt;br&gt;
        And I know nothing sweeter than&lt;br&gt;
        Champaign from last New Years&lt;br&gt;
        Sweet music in my ears&lt;br&gt;
        And a night full of no fears&lt;br&gt;
        &lt;br&gt;
        But if I had one wishful field tonight&lt;br&gt;
        I'd ask for the sun to never rise&lt;br&gt;
        If God passed a mic to me to speak&lt;br&gt;
        I'd say stay in bed, world&lt;br&gt;
        Sleep in peace&lt;/html&gt;"""

        panel = JPanel()
        panel.setLayout(BorderLayout(10, 10))

        label = JLabel(lyrics)
        label.setFont(Font("Georgia", Font.PLAIN, 14))

        panel.add(label, BorderLayout.CENTER)
        panel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10))
        self.add(panel)
        self.pack()

        self.setTitle("No Sleep")
        self.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
        self.setLocationRelativeTo(None)
        self.setVisible(True)


if __name__ == '__main__':
    Example()
</pre>

<p>
Our example shows lyrics of a song in the window. We can use HTML 
tags in <code>JLabel</code> component. We use the &lt;br&gt; tag to separate lines.
</p>

<pre class="explanation">
lyrics =  """&lt;html&gt;It's way too late to think of&lt;br&gt;
Someone I would call now&lt;br&gt;
And neon signs got tired&lt;br&gt;
...
</pre>

<p>
We define a multi line text. 
</p>

<pre class="explanation">
label = JLabel(lyrics)
label.setFont(Font("Georgia", Font.PLAIN, 14))
</pre>

<p>
Here we create the label component. We set its font to plain 
Georgia, 14 px tall. 
</p>

<pre class="explanation">
panel.add(label, BorderLayout.CENTER)
panel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10))
</pre>

<p>
We put the label into the center of the panel. We put 10px around the label.
</p>

<br>
<img src="/img/gui/jrubyswing/nosleep.png" alt="JLabel component">
<div class="figure">Figure: JLabel component</div>


<h2>JSlider</h2>

<p>
<code>JSlider</code> is a component that lets the user 
graphically select a 
value by sliding a knob within a bounded interval. 
Our example will show a volume control.
</p>

<pre class="code">
#!/usr/local/bin/jython
# -*- coding: utf-8 -*-

"""
ZetCode Jython Swing tutorial

In this program we use the JSlider
component to create a volume control
user interface

author: Jan Bodnar
website: www.zetcode.com
last modified: November 2010
"""

from java.awt import BorderLayout
from java.awt import Dimension
from javax.swing import BorderFactory
from javax.swing import Box
from javax.swing import BoxLayout
from javax.swing import ImageIcon
from javax.swing import JFrame
from javax.swing import JLabel
from javax.swing import JPanel
from javax.swing import JSlider


class Example(JFrame):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):

        self.mute = ImageIcon("mute.png")
        self.min = ImageIcon("min.png")
        self.med = ImageIcon("med.png")
        self.max = ImageIcon("max.png")

        panel = JPanel()
        panel.setLayout(BoxLayout(panel, BoxLayout.X_AXIS))
        panel.setBorder(BorderFactory.createEmptyBorder(40, 40, 40, 40))
        self.setLayout(BorderLayout())

        panel.add(Box.createHorizontalGlue())

        slider = JSlider(0, 150, 0, stateChanged=self.onSlide)
        slider.setPreferredSize(Dimension(150, 30))

        panel.add(slider)
        panel.add(Box.createRigidArea(Dimension(5, 0)))

        self.label = JLabel(self.mute, JLabel.CENTER)
        panel.add(self.label)
        panel.add(Box.createHorizontalGlue())
        self.add(panel, BorderLayout.CENTER)

        self.pack()

        self.setTitle("JSlider")
        self.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
        self.setLocationRelativeTo(None)
        self.setVisible(True)

    def onSlide(self, e):

        sender = e.getSource()

        value = sender.getValue()

        if value == 0:
            self.label.setIcon(self.mute)
        elif value > 0 and value <= 30:
            self.label.setIcon(self.min)
        elif value > 30 and value < 80:
            self.label.setIcon(self.med)
        else:
            self.label.setIcon(self.max)


if __name__ == '__main__':
    Example()
</pre>

<p>
In the code example, we show a <code>JSlider</code> and a <code>JLabel</code>. 
By dragging the slider, we change the icon on the label component. We
have four images that represent various states of the sound. 
</p>

<pre class="explanation">
self.mute = ImageIcon("mute.png")
</pre>

<p>
Here we create an image icon.
</p>

<pre class="explanation">
panel.setLayout(BoxLayout(panel, BoxLayout.X_AXIS))
</pre>

<p>
Panel component has a horizontal <code>BoxLayout</code>.
</p>

<pre class="explanation">
panel.setBorder(BorderFactory.createEmptyBorder(40, 40, 40, 40))
</pre>

<p>
We creare a 40px border around the panel.
</p>

<pre class="explanation">
panel.add(Box.createHorizontalGlue())
</pre>

<p>
We put resizable space to bo both sides, left and right. It 
is to prevent <code>JSlider</code> from growing to unnatural sizes.
</p>

<pre class="explanation">
slider = JSlider(0, 150, 0, stateChanged=self.onSlide)
</pre>

<p>
This is a <code>JSlider</code> constructor. The parameters are 
minimum value, maximum value and current value. When we slide the
knob of the slider, the onSlide() method is being called. 
</p>

<pre class="explanation">
panel.add(Box.createRigidArea(Dimension(5, 0)))
</pre>

<p>
We place a 5px rigid space between the two components. 
They are too close to each other, when the slider is at the end position.
</p>

<pre class="explanation">
self.label = JLabel(self.mute, JLabel.CENTER)
</pre>

<p>
This line creates a <code>JLabel</code> instance with the specified image 
and horizontal alignment. The label is centered vertically in its display area by
default.
</p>

<br>
<img src="/img/gui/jrubyswing/jslider.png" alt="JSlider component">
<div class="figure">Figure: JSlider component</div>


<h2>JToggleButton</h2>


<p>
<code>JToggleButton</code> is a button that has two states. 
Pressed and not pressed. You toggle between these two states 
by clicking on it. There are situations where this 
functionality fits well.
</p>

<pre class="code">
#!/usr/local/bin/jython
# -*- coding: utf-8 -*-

"""
ZetCode Jython Swing tutorial

This program uses toggle buttons to
change the background color of
a panel

author: Jan Bodnar
website: www.zetcode.com
last modified: November 2010
"""

from java.awt import Color
from java.awt import Dimension

from javax.swing import BorderFactory
from javax.swing import Box
from javax.swing import BoxLayout
from javax.swing import JFrame
from javax.swing import JPanel
from javax.swing import JToggleButton
from javax.swing.border import LineBorder


class Example(JFrame):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()


    def initUI(self):

        self.setPreferredSize(Dimension(280, 200))


        bottom = JPanel()
        bottom.setLayout(BoxLayout(bottom, BoxLayout.X_AXIS))
        bottom.setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20))

        leftPanel = JPanel()
        leftPanel.setLayout(BoxLayout(leftPanel, BoxLayout.Y_AXIS))

        redButton = JToggleButton("red", actionPerformed=self.onToggle)
        greenButton = JToggleButton("green", actionPerformed=self.onToggle)
        blueButton = JToggleButton("blue", actionPerformed=self.onToggle)

        blueButton.setMaximumSize(greenButton.getMaximumSize())
        redButton.setMaximumSize(greenButton.getMaximumSize())

        leftPanel.add(redButton)
        leftPanel.add(Box.createRigidArea(Dimension(25, 7)))
        leftPanel.add(greenButton)
        leftPanel.add(Box.createRigidArea(Dimension(25, 7)))
        leftPanel.add(blueButton)

        bottom.add(leftPanel)
        bottom.add(Box.createRigidArea(Dimension(20, 0)))

        self.display = JPanel()
        self.display.setPreferredSize(Dimension(110, 110))
        self.display.setBorder(LineBorder.createGrayLineBorder())
        self.display.setBackground(Color.black)

        bottom.add(self.display)
        self.add(bottom)

        self.pack()

        self.setTitle("JToggleButton")
        self.setResizable(False)
        self.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
        self.setLocationRelativeTo(None)
        self.setVisible(True)

    def onToggle(self, e):

        color = self.display.getBackground()
        red = color.getRed()
        green = color.getGreen()
        blue = color.getBlue()

        if e.getActionCommand() == "red":
            if red == 0:
                red = 255
            else:
                red = 0

        if e.getActionCommand() == "green":
            if green == 0:
                green = 255
            else:
                green = 0

        if e.getActionCommand() == "blue":
            if blue == 0:
                blue = 255
            else:
                blue = 0

        setCol = Color(red, green, blue)
        self.display.setBackground(setCol)


if __name__ == '__main__':
    Example()
</pre>

<p>
In the code example, we use three toggle buttons to change the color
of a rectangular component. 
</p>


<pre class="explanation">
redButton = JToggleButton("red", actionPerformed=self.onToggle)
</pre>

<p>
We create a <code>JToggleButton</code> component. When we click on
the button, the onToggle() method is launched. 
</p>


<pre class="explanation">
blueButton.setMaximumSize(greenButton.getMaximumSize())
redButton.setMaximumSize(greenButton.getMaximumSize())
</pre>

<p>
We make all three buttons of equal size.
</p>

<pre class="explanation">
color = self.display.getBackground()
red = color.getRed()
green = color.getGreen()
blue = color.getBlue()
</pre>

<p>
We determine the current red, green, blue parts of the display background color.
</p>

<pre class="explanation">
if e.getActionCommand() == "red":
    if red == 0:
        red = 255
    else:
        red = 0
</pre>

<p>
We determine, which button was toggled, and update the color part of 
the RGB value accordingly.
</p>

<pre class="explanation">
setCol = Color(red, green, blue)
self.display.setBackground(setCol)
</pre>

<p>
Here a new color is created and the display panel is updated to a new color.
</p>


<br>
<img src="/img/gui/jrubyswing/jtogglebutton.png" alt="JToggleButton component">
<div class="figure">Figure: JToggleButton component</div>


<h2>JList</h2>

<p>
<code>JList</code> is a component that displays a list of objects. It allows the user 
to select one or more items.
</p>

<pre class="code">
#!/usr/local/bin/jython
# -*- coding: utf-8 -*-

"""
ZetCode Jython Swing tutorial

This program shows all system fonts
in a JList component

author: Jan Bodnar
website: www.zetcode.com
last modified: November 2010
"""


from java.awt import BorderLayout
from java.awt import Dimension
from java.awt import Font
from java.awt import GraphicsEnvironment

from javax.swing import JFrame
from javax.swing import BorderFactory
from javax.swing import JScrollPane
from javax.swing import JPanel
from javax.swing import JLabel
from javax.swing import JList



class Example(JFrame):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):

        panel = JPanel()
        panel.setLayout(BorderLayout())
        panel.setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20))

        ge = GraphicsEnvironment.getLocalGraphicsEnvironment()
        fonts = ge.getAvailableFontFamilyNames()

        list = JList(fonts, valueChanged=self.onChanged)

        pane = JScrollPane()
        pane.getViewport().add(list)
        pane.setPreferredSize(Dimension(250, 200))
        panel.add(pane)

        self.label = JLabel("Aguirre, der Zorn Gottes")
        self.label.setFont(Font("Serif", Font.PLAIN, 12))
        self.add(self.label, BorderLayout.SOUTH)

        self.add(panel)
        self.pack()

        self.setTitle("JList")
        self.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
        self.setLocationRelativeTo(None)
        self.setVisible(True)

    def onChanged(self, e):

        sender = e.getSource()

        if not e.getValueIsAdjusting():
            name = sender.getSelectedValue()
            font = Font(name, Font.PLAIN, 13)
            self.label.setFont(font)


if __name__ == '__main__':
    Example()
</pre>

<p>
In our example, we will display a <code>JList</code> and a <code>JLabel</code> 
components. The list component contains a list of all available font family names 
on our system. If we select an item from the list, the label will 
be displayed in a font, we have chosen.
</p>

<pre class="explanation">
ge = GraphicsEnvironment.getLocalGraphicsEnvironment()
fonts = ge.getAvailableFontFamilyNames()
</pre>

<p>
Here we obtain all possible font family names on our system.
</p>

<pre class="explanation">
list = JList(fonts, valueChanged=self.onChanged)
</pre>

<p>
We create an instance of the <code>JList</code> component. 
If we select an option from the list, the onChanged() method
is called. 
</p>

<pre class="explanation">
if not e.getValueIsAdjusting():
</pre>

<p>
Events in list selection are grouped. We receive events for both selecting 
and deselecting. To filter only the selecting events, we use the 
<code>getValueIsAdjusting()</code> method.
</p>


<pre class="explanation">
name = sender.getSelectedValue()
font = Font(name, Font.PLAIN, 13)
self.label.setFont(font)
</pre>

<p>
We get the selected item and set a new font for the label.
</p>

<pre class="explanation">
pane = JScrollPane()
pane.getViewport().add(list)
</pre>

<p>
<code>JList</code> component is not scrollable by default. 
We put the list into the <code>JScrollPane</code> to make 
it scrollable.
</p>


<br>
<img src="/img/gui/jrubyswing/jlist.png" alt="JList component">
<div class="figure">Figure: JList component</div>


<hr class="btm">

<p>
In this part of the Jython Swing tutorial, we have presented several Swing components.
</p>


<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>




<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 14, 2010  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

